import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Radio,
    Input,
    Upload,
    Space,
    Select,
    message
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Link, useNavigate, useSearchParams } from 'react-router-dom'
import './index.scss'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { useEffect, useState } from 'react'
import { publishArticleAPI, getArticleDetailAPI, updateArticleAPI } from '@/api/article'
import { useChannel } from '@/hooks/useChannel'

const { Option } = Select

const Publish = () => {
    // 获取频道列表
    const { channelList } = useChannel()

    //提交表单
    const onFinish = async (formValue) => {
        // console.log(formValue)
        // 校验封面类型imageType是否和实际的图片列表imageList数量是相等的
        if (imageList.length !== imageType) {
            return message.warning('封面类型和图片数量不一致')
        }

        //从收集到的对象中解构出需要的数据
        const { title, content, channel_id } = formValue
        // 1.按照接口文档的格式处理收集到的表单数据
        const reqData = {
            title,
            content,
            cover: {
                type: imageType,    // 0 无图 1 单图 3 三图
                // 这里的url处理逻辑只是在新增时候的逻辑
                // 编辑的时候需要做处理
                // images: imageList.map(item => item.response.data.url)   //图片列表（数组）
                images: imageList.map(item => {
                    if(item.response){
                        return item.response.data.url
                    }else{
                        return item.url
                    }
                })
            },
            channel_id
        }
        // 2.调用接口提交
        // 处理调用不同的接口 新增 - 新增接口  编辑状态 - 更新接口 id
        if(articleId) {
            // 传入文章id
            updateArticleAPI({
                ...reqData,
                id: articleId
            })
        }else{
            publishArticleAPI(reqData)
        }
    }

    // 上传回调
    const [imageList, setImageList] = useState([])  // 图片列表
    const onChange = (value) => {
        // console.log('正在上传中', value)
        setImageList(value.fileList)
    }

    // 切换封面类型
    const [imageType, setImageType] = useState(0)
    const onTypeChange = (e) => {
        // console.log('切换封面类型', e.target.value)
        setImageType(e.target.value)
    }

    // 回填数据（跳转后立即渲染）
    const [searchParams] = useSearchParams()
    const articleId = searchParams.get('id')
    // console.log(articleId)
    // 获取实例对象
    const [form] = Form.useForm()

    useEffect(() => {
        // 1.通过id获取数据
        async function getArticleDetail() {
            const res = await getArticleDetailAPI(articleId)
            // 结构优化
            const data = res.data
            const { cover } = data
            form.setFieldsValue({
                ...data,
                type: cover.type
            })
            // 为什么现在的写法无法回填封面？
            // 数据结构的问题 setFieldsValue 无法回填嵌套的对象
            // {type: 3}  {cover: {type: 3, images: []}}

            // 回填图片列表 imageType > 0 显示列表
            setImageType(cover.type)

            // 外层{}解析表达式，内层声明返回数据类型为object
            // 图片列表的格式 [{url:'图片地址'}, {url:'图片地址'}, {url:'图片地址'}]
            setImageList(cover.images.map(url => {
                return { url }
            }))
        }
        // 2.调用实例方法 完成回填
        // 只有存在id的时候才能调用此函数回填
        if (articleId) {
            getArticleDetail()
        }
    }, [articleId, form])

    //新增或修改文章反馈
    const navigate = useNavigate()
    const onSubmit = () => {
        if(articleId) {
            message.success('文章修改成功')
        }else{
            message.success('文章发布成功')
        }
        navigate('/article')
    }
    return (
        <div className="publish">
            <Card
                title={
                    <Breadcrumb items={[
                        { title: <Link to={'/'}>首页</Link> },
                        { title: `${articleId ? '编辑' : '发布'}文章` },
                    ]}
                    />
                }
            >
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ type: 0 }}
                    onFinish={onFinish}
                    form={form}
                >
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[{ required: true, message: '请输入文章标题' }]}
                    >
                        <Input placeholder="请输入文章标题" style={{ width: 400 }} />
                    </Form.Item>
                    <Form.Item
                        label="频道"
                        name="channel_id"
                        rules={[{ required: true, message: '请选择文章频道' }]}
                    >
                        <Select placeholder="请选择文章频道" style={{ width: 400 }}>
                            {channelList.map(item =>
                                // value属性用户选中之后会自动收集起来作为接口的提交字段
                                <Option value={item.id} key={item.id}>{item.name}</Option>
                            )}
                        </Select>
                    </Form.Item>
                    <Form.Item label="封面">
                        <Form.Item name="type">
                            <Radio.Group onChange={onTypeChange}>
                                <Radio value={1}>单图</Radio>
                                <Radio value={3}>三图</Radio>
                                <Radio value={0}>无图</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {/* 
                            listType：决定选择文件框的外观样式
                            showUploadList：控制显示上传列表
                        */}
                        {imageType > 0 &&
                            <Upload
                                listType="picture-card"
                                showUploadList
                                name='image'
                                //action配置上传的接口地址
                                action={'http://geek.itheima.net/v1_0/upload'}
                                onChange={onChange}
                                maxCount={imageType}
                                fileList={imageList}
                            >
                                <div style={{ marginTop: 8 }}>
                                    <PlusOutlined />
                                </div>
                            </Upload>}
                    </Form.Item>
                    <Form.Item
                        label="内容"
                        name="content"
                        rules={[{ required: true, message: '请输入文章内容' }]}
                    >
                        {/* 富文本编辑器 */}
                        <ReactQuill
                            className="publish-quill"
                            theme="snow"
                            placeholder="请输入文章内容"
                        />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 4 }}>
                        <Space>
                            <Button size="large" type="primary" htmlType="submit" onClick={onSubmit}>
                                发布文章
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Publish